<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <el-form class="dialog-form" :model="formData" ref="vForm" label-position="right" label-width="100px" size="medium"
      @submit.native.prevent :rules="formRules">
      <el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="盘点主题" prop="billTitle">
              <el-input v-model="formData.billTitle" placeholder="请输入盘点主题"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="盘点类型" prop="labelType">
              <el-select v-model="formData.labelType" placeholder="请选择盘点类型" class="full-width-input" clearable>
                <el-option v-for="(item, index) in [
                  { value: 0, label: '档案盘点' },
                  { value: 1, label: '盒盘点' },
                ]" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="盘点工具" prop="inventoryTool">
              <el-select v-model="formData.inventoryTool" placeholder="请选择盘点工具" class="full-width-input">
                <el-option v-for="(item, index) in [
                  { value: 0, label: '人工' },
                  { value: 3, label: '密集架' },
                ]" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择库房" prop="repositoryId"
              :rules="[{ required: true, message: '请选择库房', trigger: 'change' }]">
              <el-select v-model="formData.repositoryId" placeholder="请选择库房" class="full-width-input"
                :disabled="type === 'edit'">
                <el-option v-for="(item, index) in repositoryOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled" @click.native="changeRepository(item)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择装具" prop="cabinetName" v-if="IsShowObj.cabinetName">
              <el-tooltip :content="formData.cabinetName" placement="bottom" effect="light">
                <span style="
                    color: #66b1ff;
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 600px;
                  ">{{ formData.cabinetName }}</span>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="选择列" prop="colName" v-if="IsShowObj.colName">
              <el-tooltip :content="formData.colName" placement="bottom" effect="light">
                <span style="
                    color: #66b1ff;
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 600px;
                  ">{{ formData.colName }}</span>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="选择库位" prop="positionName" v-if="IsShowObj.positionName">
              <el-tooltip :content="formData.positionName" placement="bottom" effect="light">
                <span style="
                    color: #66b1ff;
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 600px;
                  ">{{ formData.positionName }}</span>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>

      <el-form-item label="备注" prop="note">
        <el-input v-model="formData.note" type="textarea" :rows="2" placeholder="请输入备注"
          class="full-width-input"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
    </div>
    <choiceCabinet ref="choiceCabinet" :cabinetList="deviceOptions" UseDetails="newInventory"></choiceCabinet>
  </el-dialog>
</template>

<script>
// import { EventBus } from '@/utils/EventBus'
import { add, update, getInfo } from '@/api/rfid/inventoryBill'
import { dropDown as repositoryDropDown } from '@/api/bas/repository'
import { getColInfo } from '@/api/bas/cabinet'
import { allCabinet } from '@/api/rfid/virtualRepository'
import choiceCabinet from '@/components/choiceCabinet.vue'
export default {
  name: 'newInventoryDialog',
  components: {
    choiceCabinet,
  },
  data() {
    return {
      type: '',
      dialogTitle: '',
      dialogVisible: false,
      formData: {},
      formRules: {
        billTitle: [{ required: true, message: '请输入盘点主题', trigger: 'blur' }],
        labelType: [{ required: true, message: '请选择盘点类型', trigger: 'change' }],
        inventoryMethod: [{ required: true, message: '请选择盘点方式', trigger: 'change' }],
        inventoryTool: [{ required: true, message: '请选择盘点工具', trigger: 'change' }],
        isDevice: [{ required: true, message: '请选择是否装具盘点', trigger: 'blur' }],
      },
      isDevice: false,
      repositoryOptions: [],
      deviceOptions: [],
      cabinetList: [],
      inventoryMethodOptions: [],
      colNoOptions: [],
      zyNoOptions: [],
      divNoOptions: [],
      leNoOptions: [],
      IsShowFlag: false,
      SelectParams: {},
      IsShowObj: {
        cabinetName: true,
        colName: false,
        positionName: false,
      },
    }
  },
  watch: {
    'formData.inventoryMethod'(newValue, oldValue) {
      if (newValue === 0) {
        this.isDevice = false
        this.IsShowFlag = false
      } else if (newValue === 2) {
        this.IsShowFlag = true
      } else if (newValue === 1) {
        this.isDevice = true
        this.IsShowFlag = false
      }
    },
  },
  mounted() {
    // EventBus.$on('submitPostion', this.handleData)
    this.getRepository()
  },
  methods: {
    handleData(param1, param2) {

      if (param2 == '0') {
        //选择整架
        this.formData.cabinetName = param1.deviceName
        this.formData.cabinetId = param1.deviceId
        this.IsShowObj = {
          cabinetName: true,
          colName: false,
          positionName: false,
        }
      } else if (param2 == '1') {
        //选择列
        this.formData.cabinetId = param1[0].cabinetId
        this.formData.cabinetName = param1[0].deviceName || param1[0].cabinetName
        this.formData.colIds = param1.map((x) => x.colId).toString()
        this.formData.colName = param1.map((x) => x.colName).toString()
        this.IsShowObj = {
          cabinetName: true,
          colName: true,
          positionName: false,
        }
      } else if (param2 == '2') {
        //选择库位
        this.formData.cabinetId = param1[0].cabinetId
        this.formData.cabinetName = param1[0].deviceName

        this.formData.positionName = param1.map((x) => x.positionName).toString()
        this.formData.positionIds = param1.map((x) => x.positionId).toString()
        this.IsShowObj = {
          cabinetName: true,
          colName: false,
          positionName: true,
        }
      }
      this.$forceUpdate()
    },
    // 选择盘点工具，若为人工，盘点方式只有装具和层架；若为盘点车，盘点方式只有装具和层架；若为密集架，盘点方式全有
    changeTool(value) {
      if (value === 0) {
        this.inventoryMethodOptions = [
          { value: 0, label: '装具盘点' },
          { value: 1, label: '层架盘点' },
        ]
      } else if (value === 2) {
        this.inventoryMethodOptions = [
          { value: 0, label: '装具盘点' },
          { value: 1, label: '层架盘点' },
        ]
      } else if (value === 3) {
        this.inventoryMethodOptions = [
          { value: 0, label: '装具盘点' },
          { value: 1, label: '层架盘点' },
        ]
      }
      this.formData.inventoryMethod = null
      this.formData.repositoryId = null
      this.formData.cabinetId = null
      this.formData.colNo = null
      this.formData.zyNo = null
      this.formData.leNo = null
      this.formData.divNo = null
      this.formData.positionName = null
      this.formData.note = null
    },
    // 选择盘点方式，如果是自定义盘点
    changeMethod(value) {
      this.formData.repositoryId = null
      this.formData.cabinetId = null
      this.formData.colNo = null
      this.formData.zyNo = null
      this.formData.leNo = null
      this.formData.divNo = null
      this.formData.positionName = null
      this.formData.note = null
    },
    getRepository() {
      repositoryDropDown()
        .then((res) => {
          if (res.data.code === 200) {
            this.repositoryOptions = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    add() {
      this.type = 'add'
      this.dialogTitle = '新增盘点'
      this.dialogVisible = true
      this.IsShowObj = {
        cabinetName: true,
        colName: false,
        positionName: false,
      }
    },
    edit(row) {
      this.getRepository()
      this.type = 'edit'
      this.dialogTitle = '编辑盘点'
      this.IsShowObj = {
        cabinetName: false,
        colName: false,
        positionName: false,
      }
      getInfo(row.billNumber)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data

            if (
              (res.data.data.cabinetName != null && res.data.data.positionName == null) ||
              res.data.data.positionName == ''
            ) {
              this.formData.cabinetName = res.data.data.cabinetName
              this.IsShowObj = {
                cabinetName: true,
                colName: false,
                positionName: false,
              }
            }
            if (res.data.data.cabinetName && res.data.data.colName) {
              this.formData.cabinetName = res.data.data.cabinetName
              this.formData.colName = res.data.data.colName
              this.IsShowObj = {
                cabinetName: true,
                colName: true,
                positionName: false,
              }
            }
            if (res.data.data.positionName) {
              this.formData.positionName = res.data.data.positionName
              this.IsShowObj = {
                cabinetName: true,
                colName: false,
                positionName: true,
              }
            }

            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    changeRepository(value) {
      if (value) {
        this.deviceOptions = []
        this.getCabinetList(value.value)

        this.$refs.choiceCabinet.openDialog(this.formData.cabinetId)
      }
    },
    // 获取密集架的数据
    getCabinetList(id) {
      allCabinet(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.deviceOptions = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    changeDevice(value) {
      this.formData.colNo = null
      this.formData.zyNo = null
      this.formData.leNo = null
      this.formData.divNo = null
      this.formData.positionName = null
      this.formData.note = null
      // 如果是自定义盘点
      if (this.formData.inventoryMethod == 2) {
        getColInfo(value)
          .then((res) => {
            if (res.data.code == 200) {
              this.colNoOptions = res.data.data
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      }
      this.cabinetList = this.deviceOptions.filter((x) => x.deviceId === value)
      if (this.formData.inventoryMethod == 1 && value != '') {
        this.$refs.choiceCabinet.openDialog()
      }
    },
    changeCol(value) {
      // 生成AB面
      const zyNoOptionsMap = {
        0: [
          { value: 1, label: 'A面' },
          { value: 2, label: 'B面' },
        ],
        1: [
          { value: 1, label: '左面' },
          { value: 2, label: '右面' },
        ],
        2: [{ value: 1, label: 'A面' }],
        3: [{ value: 2, label: 'B面' }],
        4: [{ value: 1, label: '左面' }],
        5: [{ value: 2, label: '右面' }],
      }
      this.zyNoOptions = zyNoOptionsMap[value.zyType] || []
      if (value.divNum) {
        // 根据divNum生成数组
        for (let i = 1; i <= value.divNum; i++) {
          this.divNoOptions.push({
            value: i,
            label: `${i}层`,
          })
        }
      }
      if (value.leNum) {
        // 根据leNum生成数组

        this.leNoOptions = []
        for (let i = 1; i <= value.leNum; i++) {
          this.leNoOptions.push({
            value: i,
            label: `${i}节`,
          })
        }
      }
    },

    submitForm() {
      if (this.formData.cabinetName || this.formData.colName || this.formData.positionName) {
        this.validateForm()
      } else {
        this.$message.warning('请选择盘点位置')
      }
    },
    validateForm() {
      this.$refs['vForm'].validate((valid) => {
        if (valid) {
          if (this.type === 'add') {
            add(this.formData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('新增成功')
                  this.closeDialog()
                  this.$emit('ok')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          } else {
            update(this.formData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('修改成功')
                  this.closeDialog()
                  this.$emit('ok')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        }
      })
    },
    closeDialog() {
      this.formData = {}
      this.$refs['vForm'].resetFields()
      this.dialogVisible = false
      this.isDevice = false
      this.IsShowFlag = false
    },
  },
}
</script>

<style scoped lang="less"></style>
